<template>
  <div id="menuConfiguration">
    <el-card class="box-card">
      <!-- 头部 -->
      <template #header>
        <div class="card-header">
          <div>直播列表</div>
        </div>
      </template>

      <el-main style="position: relative">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="search">
              <el-input
                v-model.trim="form.search"
                placeholder="请输入关键词..."
                :prefix-icon="Search"
              >
                <template #append>
                  <el-button type="primary" size="large" @click="searchBtn"
                    >搜索</el-button
                  >
                </template>
              </el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <el-select
              @change="slectChange"
              v-model="form.select"
              placeholder="直播状态"
              size="large"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-date-picker
              @change="changeTime"
              v-model="form.time"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-col>
          <el-col :span="8" style="position: relative">
            <el-button class="btn" @click="rightconFiguration" type="primary"
              >直播配置</el-button
            >
          </el-col>
        </el-row>

        <div class="tableList">
          <el-table :data="tableData">
            <el-table-column label="直播名称">
              <template #default="scope">
                <span
                  @click="tableShareBtn(scope.row.id, scope.row, 'live')"
                  class="username"
                  >{{ scope.row.name }}</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="school" label="直播院校" />
            <el-table-column prop="teacher" label="直播老师" />
            <el-table-column prop="time" label="直播时间" />
            <el-table-column label="直播状态">
              <template #default="scope">
                <span>{{ scope.row.status == 1 ? '直播中' : '' }}</span>
                <span>{{ scope.row.status == 2 ? '即将开始' : '' }}</span>
                <span>{{ scope.row.status == 3 ? '回放中' : '' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <Share
                  @click="tableShareBtn(scope.row.id, scope.row, 'action')"
                  class="icon"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
      <div class="pagintion">
        <el-pagination
          :page-sizes="[10, 20, 300, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <div class="dialog">
        <Dialog ref="dom" width="50%" title="直播配置" :headerStatus="true">
          <div class="boxMask">
            <el-form :model="form" label-width="auto">
              <el-form-item
                label="是否前台显示"
                label-width="100px"
                style="formTitle"
              >
                <el-radio-group v-model="form.resource" class="off">
                  <el-radio value="" size="large">开</el-radio>
                  <el-radio value="" size="large">关</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
          <div class="dialog-footer">
            <el-button @click="dialogClose">取消</el-button>
            <el-button type="primary" @click="dialogClose">确定</el-button>
          </div>
        </Dialog>
      </div>

      <dialogShare
        v-model:showDialog="showDialog"
        :detailArr="placardArr"
        @downloadPoster="downloadPoster"
      >
      </dialogShare>
      <dialogPoster
        v-model:showDialogPoster="showDialogPoster"
        :deafultImg="posterArr"
      ></dialogPoster>
    </el-card>
  </div>
</template>

<script setup>
import { liveAuto, detail } from '@/api/liveAuto';
import Dialog from '@/components/Dialog/Dialog.vue';
import { ref, onMounted, reactive } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import dialogShare from '@/views/liveBroadcast/broadcastList/coomponents/dialogShare';
import dialogPoster from '@/views/liveBroadcast/broadcastList/coomponents/dialogPoster';
import { DEAFULT_IMG_LIST, uniqueArr } from '../hrlper';
const router = useRouter();
const tableData = ref([]);
const showDialog = ref(false);

const form = reactive({
  search: '',
  time: '',
  select: '',
  resource: '',
});

const params = ref({
  page: 1,
  pageSize: 10,
});

const dom = ref(null);

const showDialogPoster = ref(false);

const total = ref(0);
const placardArr = ref([]);
const options = [
  {
    value: '1',
    label: '直播中',
  },
  {
    value: '2',
    label: '直播即将开始',
  },
  {
    value: '3',
    label: '回放中',
  },
];

const handleSizeChange = (val) => {
  params.value.pageSize = val;
  liveList(params.value);
};
const handleCurrentChange = (val) => {
  params.value.page = val;
  liveList(params.value);
};

const rightconFiguration = () => {
  dom.value.openChange();
};
const dialogClose = () => {
  dom.value.closeChange();
};
const posterArr = ref([]);
const tableShareBtn = (id, row, type) => {
  const arr = [];

  if (type == 'live') {
    router.push({ path: 'channelId', query: { id: id } });
  } else {
    showDialog.value = true;
    detail({ id: id }).then((res) => {
      placardArr.value = res.data;
      arr.push({
        poster: row.poster,
        id: row.id,
      });
      const result = [...arr, ...DEAFULT_IMG_LIST];
      posterArr.value = uniqueArr(result);
    });
  }
};
const downloadPoster = () => {
  showDialog.value = false;
  showDialogPoster.value = true;
};

//列表搜素
const searchBtn = () => {
  params.value.search = form.search;
  liveList(params.value);
};

const slectChange = (val) => {
  params.value.status = val;
  liveList(params.value);
};
const changeTime = (val) => {
  let time = [];
  let starTime = val[0];
  let endTime = val[1];
  time.push(starTime);
  time.push(endTime);
  params.value.search_time = time;
  liveList(params.value);
  // ,
};
// 直播列表
const liveList = (params) => {
  liveAuto(params).then((res) => {
    tableData.value = res.data.data;

    total.value = res.data.total;
  });
};
onMounted(() => {
  liveList(params.value);
});
</script>

<style lang="scss" scoped>
:deep(.el-range-editor.el-input__wrapper) {
  height: 40px;
}

// :deep(.el-dialog.is-align-center){
//     margin-top: 57vh;
//     transform: translateY(0);
// }
:deep(.el-button) {
  height: 40px;
}

.btn {
  position: absolute;
  right: 10px;
  top: 0;
}

.username {
  color: #165dff;
  cursor: pointer;
}

.icon {
  color: #165dff;
  cursor: pointer;
  width: 20px;
  height: 20px;
}

.off {
  margin-left: 50px;
}

.box-card {
  margin: 20px;
  position: relative;
  padding: 20px;
  box-sizing: border-box;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tableList {
    margin-top: 20px;
  }

  .pagintion {
    right: 20px;
    bottom: 10px;
    position: absolute;
  }

  .boxMask {
    position: relative;
    // display: flex;
    // align-items: center;
    padding: 24px 24px 16px 24px;
    border-bottom: 1px solid #dcdfe6;

    .formTitle {
      display: flex;
      align-items: center;
    }
  }

  .dialog-footer {
    // position: absolute;
    // right: 20px;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }

  .infinite-list {
    height: 300px;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .infinite-list .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: var(--el-color-primary-light-9);
    margin: 10px;
    color: var(--el-color-primary);
  }

  .infinite-list .infinite-list-item + .list-item {
    margin-top: 10px;
  }

  .demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
  }

  .demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
  }

  .demo-date-picker .block:last-child {
    border-right: none;
  }
}
</style>
